<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/* 练习：1.圆形  2.正三角形
		   提醒：宽高与倒角一致
		        
		 */
			div#circle{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				border-radius: 50%;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 0px 0px 50px 10px pink;
			}
		/* 2.正三角形
		   css中 抓到div  【斜线】
		   左边框 50像素实线红色
		   右边框 50像素实线黄色
		   下边框 50像素实线黑色 
		   注意：先别加高宽  transparent 透明色
			*/
		   div#triangle{
			   width: 0;
			   /* border-left: 50px solid transparent;
			   border-right: 50px solid transparent;
			   border-bottom: 50px solid black; */
			   /* 两行：倒三角，蓝色，透明度。3
				提醒：所有边框：50px solid transparent
				上边框颜色改成蓝色 0，0，255 */
				border: 50px solid transparent;
				border-top-color: rgba(0, 150, 255, .3);
		   }
		   /* outline  边框轮廓  只针对input元素 */
		   input{
			   outline: 1px solid lightblue;
		   }
		         /* 实际应用：通配选择器 去掉轮廓
				    {outline:0;}
				  */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>